<template>
  <el-tooltip class="toolbar-item" content="字体颜色" placement="top">
    <el-popover placement="top-start" width="242" popper-class="font-color-popper" v-model="fontColorPickerVisible">
      <div class="toolbar-fontcolor" slot="reference">
        <i class="iconfont icon-zitiyanse"></i>
        <div class="color-bar" :style="{ backgroundColor: fontColorSelf }"></div>
        <div class="arrow-down"></div>
      </div>
      <div class="color-picker">
        <div class="header">
          <span class="default-color"></span>
          <span>默认</span>
        </div>
        <div class="colors">
          <div
            class="color-item"
            v-for="(item, idx) in fontColorArr"
            :key="idx"
            :style="{ background: item }"
            @mousedown.prevent="onFontColorSelect(item)"></div>
        </div>
        <div class="footer">
          <span class="input-color" :style="{ backgroundColor: userInputColor }"></span>
          <div class="input-view">
            <el-input v-model="userColor" :maxlength="6">
              <span slot="prefix" class="color-prefix">#</span>
            </el-input>
          </div>
          <el-button type="text" class="">确定</el-button>
        </div>
      </div>
    </el-popover>
  </el-tooltip>
</template>

<script>
export default {
  props: {},
  inject: ['getSelectStyleObj', 'execCommand'],
  data() {
    return {
      fontColorSelf: '#333',
      fontColorPickerVisible: false,
      fontColorArr: [
        '#ffffff',
        '#000000',
        '#fe0000',
        '#ff9900',
        '#feff00',
        '#98fa1b',
        '#6dddff',
        '#413ed6',
        '#ee41fd',
        '#e8e8e8',
        '#7b7b7b',
        '#fec8b8',
        '#ffe0b2',
        '#fff1cc',
        '#d9ead3',
        '#e0f8ff',
        '#d0c7f3',
        '#ffe4ff',
        '#d9d9d9',
        '#5c5c5c',
        '#e89999',
        '#feb84d',
        '#ffe59a',
        '#acdb7d',
        '#84d4e5',
        '#8b7be8',
        '#ee93f6',
        '#c4c4c4',
        '#333333',
        '#e06666',
        '#fa8c00',
        '#ffd966',
        '#86c121',
        '#4dc2ed',
        '#4049b9',
        '#d041e1',
        '#9d9d9d',
        '#262626',
        '#cb0200',
        '#e65100',
        '#feb700',
        '#668f00',
        '#0088fb',
        '#2740b0',
        '#a418d2',
      ],
      userColor: '',
    }
  },
  computed: {
    selectStyleObj() {
      return this.getSelectStyleObj()
    },
    fontColor() {
      const strFontSize = this.selectStyleObj && this.selectStyleObj.fontSize
      if (strFontSize) {
        return strFontSize.substring(0, strFontSize.length - 2)
      }
      return this.fontColorSelf
    },
    userInputColor() {
      if (this.userColor && this.userColor.length) {
        return '#' + this.userColor
      }
      return '#fff'
    },
  },
  watch: {
    selectStyleObj(val) {
      const strFontColor = val && val.color
      if (strFontColor) {
        this.fontColorSelf = strFontColor
      }
    },
  },
  methods: {
    showFontColorPicker() {},
    onFontColorSelect(fontColor) {
      this.fontColorSelf = fontColor
      this.fontColorPickerVisible = false
      this.setFontColor(fontColor)
    },
    setFontColor(fontColor) {
      this.execCommand('ForeColor', fontColor)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@styles/richText/toolbar.scss';
.toolbar-fontcolor {
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;

  .icon-zitiyanse {
    font-size: 16px;
  }
  .color-bar {
    height: 2px;
    width: 100%;
    background: #333;
    margin-top: 1px;
    margin-bottom: 2px;
  }
}
</style>

<style lang="scss" scoped>
.font-color-popper {
  .color-picker {
    height: 200px;
    .header {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #d8d8d8;
      padding: 0px 2px 10px;
      margin-bottom: 10px;
      .default-color {
        display: inline-block;
        height: 20px;
        width: 20px;
        background: #333;
        margin-right: 10px;
      }
    }
    .colors {
      display: flex;
      flex-wrap: wrap;
      .color-item {
        height: 20px;
        width: 20px;
        margin: 2px;
        border: 1px solid #ebebeb;
        cursor: pointer;
        transition: 0.3s;
        &:hover {
          // outline: red solid 2px;
          transform: scale(1.2);
        }
      }
    }
    .footer {
      border-top: 1px solid #d8d8d8;
      margin-top: 10px;
      display: flex;
      align-items: center;
      .input-color {
        height: 20px;
        width: 20px;
        margin-right: 10px;
        border: 1px solid #ebebeb;
      }
      ::v-deep .input-view {
        height: 20px;
        flex: 1;
        .el-input__inner {
          height: 20px;
          width: 100px;
          padding-left: 20px;
        }
        .el-input__prefix {
          color: #333;
          margin-left: 4px;
        }
      }
    }
  }
}
</style>
